<!-- 企业对比 -->
<template>
  <view class="comparison_page screen-width">
    <view class="search_bar">
      <view class="search_input">
        <view class="search_L">
          <input type="text" placeholder="请输入您要对比的企业名称" v-model="companyName" @input="chandleClick" />
          <!-- <image src="../../static/policy/search.png" mode="" /> -->
        </view>
        <view class="search_R" @tap="addConpanyName">添加</view>
      </view>
      <view class="search_result" v-show="companyNameList.length && companyName">
        <ul>
          <li v-for="(item, index) in companyNameList" :key="index" @tap="selectItem(item.companyName, item.companyId)">
            <p v-html="item.companyName"></p>
          </li>
        </ul>
      </view>
    </view>
    <!-- 有搜索结果 -->
    <view class="search_content" v-show="resultList.length">
      <text>已选对比企业</text>
      <view class="resultList">
        <ul>
          <li v-for="(item, index) in resultList" :key="index">
            <van-swipe-cell :before-close="beforeClose" :name="index">
              <van-cell :border="true" :value="item.companyName" @click="toDetail(item.id, item.companyName)" />
              <template #right>
                <van-button square type="danger" text="删除" />
              </template>
            </van-swipe-cell>
          </li>
        </ul>
      </view>
      <view class="startComparison" @tap="handleStart">开始对比</view>
    </view>
    <!-- 没有搜索结果 -->
    <!-- v-show="!companyNameList.length && !resultList.length" -->
    <view class="no_result">
      <image src="../../static/compare/detail.png" />
      <!-- <text>请输入您想要对比的企业名称进行添加对比</text> -->
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
  import { isWeixin, wxShareConfig } from 'util/wx.js'
  export default {
    components: {},
    data() {
      return {
        companyName: '', // 企业名称的关键字
        pageIndex: 0, // 页码数
        companyNameList: [], // 搜索结果
        resultList: [], // 选中的列表结果
        companyIdList: '', // 详情页传参
      }
    },
    onLoad(options) {
      if (JSON.stringify(options) != '{}') {
        this.selectItem(options.companyName, options.id)
      }
      console.log(23232323)
    },
    onShow() {
      if (isWeixin()) {
        this.initShareConfig()
      }
    },
    methods: {
      // 获取企业名称
      getCompanyName() {
        let obj = {
          area: '',
          city: '',
          companyId: '',
          companyName: this.companyName,
          endLat: 0,
          endLng: 0,
          pageIndex: this.pageIndex,
          pageSize: 10,
          province: '',
          startLat: 0,
          startLng: 0,
        }
        this.$post('/bmj-api/api/es/company/query.json', obj).then(res => {
          let { retCode, data } = res
          if (retCode == 0 && data.content.length) {
            this.companyNameList = data.content
            this.$changeText(data.content, 'companyName', this.companyName)
          } else if (res.code == 10005) {
            uni.showModal({
              title: '提示',
              content: '企业查询数量已满',
              success: function (res) {
                if (res.confirm) {
                  // console.log("用户点击确定");
                  uni.navigateTo({
                    url: '/pages/VIP/index',
                  })
                }
              },
            })
          } else if (retCode == 0 && !data.content.length) {
            uni.showToast({
              title: '找不到您要查找的企业',
              duration: 2000,
              icon: 'none',
            })
            this.companyNameList = []
          }
        })
      },

      beforeClose({ name, instance }) {
        let _this = this
        uni.showModal({
          title: '提示',
          content: '确认要删除该企业',
          success: function (res) {
            if (res.confirm) {
              // console.log("用户点击确定");
              _this.resultList.splice(name, 1)
            }
          },
        })
        instance.close() // 关闭
      },
      // 点击公司名称进入到详情
      toDetail(id, companyName) {
        uni.navigateTo({
          url: `/pages/enterpriseDetails/brand_detail?id=${id}&type=1&name=${companyName}&liIndex=0&showNew=true`,
        })
      },
      //点击添加按钮
      addConpanyName() {
        if (this.companyName == '') {
          uni.showToast({
            title: '请输入企业名称',
            duration: 2000,
            icon: 'none',
          })
          return
        }
        let obj = {
          area: '',
          city: '',
          companyId: '',
          companyName: this.companyName,
          endLat: 0,
          endLng: 0,
          pageIndex: this.pageIndex,
          pageSize: 10,
          province: '',
          startLat: 0,
          startLng: 0,
        }
        this.$post('/bmj-api/api/es/company/query.json', obj).then(res => {
          let { content } = res.data
          // console.log(res);
          if (res.retCode == 0) {
            if (!content.length) {
              uni.showToast({
                title: '找不到您要查找的企业',
                duration: 2000,
                icon: 'none',
              })
              this.companyNameList = []
            } else {
              let v = content.find(el => el.companyName == this.companyName)
              if (!v) {
                uni.showToast({
                  title: '未匹配到企业',
                  duration: 2000,
                  icon: 'none',
                })
                this.companyNameList = []
              } else {
                this.selectItem(v.companyName, v.companyId)
                this.companyName = ''
              }
            }
          }
        })
      },

      // 监听input框的值
      chandleClick() {
        this.getCompanyName()
      },
      selectItem(val, id) {
        val = this.$matcheHTML(val) // 去除html标签
        if (this.resultList.length) {
          this.resultList.unshift({ companyName: val, id: id })
          let arr = this.resultList.map(item => item.id)
          this.companyIdList = arr.join('、')
          let index = this.resultList.findIndex(el => el.companyName == val)
          // console.log(index);
          if (index == -1) {
            if (this.resultList.length >= 5) {
              uni.showToast({
                title: '最多可对比5家企业',
                duration: 2000,
                icon: 'none',
              })
              this.companyNameList = []
            } else {
              this.resultList.unshift({ companyName: val, id: id })
              this.companyNameList = []
              this.companyName = '' // 点击关键字后清空输入框的值
            }
          } else {
            uni.showToast({
              title: '所选企业已经添加',
              duration: 2000,
              icon: 'none',
            })
            this.companyNameList = []
          }
        } else {
          this.resultList.unshift({ companyName: val, id: id })
          let arr = this.resultList.map(item => item.id)
          this.companyIdList = arr.join('、')
          this.companyNameList = []
          this.companyName = '' // 点击关键字后清空输入框的值
        }
      },
      // 点击开始对比
      handleStart() {
        this.$store.commit('addCompanyList', this.resultList)
        if (this.resultList.length < 2) {
          // 至少选择两家公司才能进行对比
          uni.showToast({
            title: '至少选择两家公司才能进行对比哦~',
            duration: 2000,
            icon: 'none',
          })
          return
        }
        for (let i = 0; i < this.resultList.length; i++) {
          let id = this.resultList[i].id
          this.$get('/bmj-api/api/cms/cmsCompany/companyContrast?id=' + id).then(res => {
            if (res.code == 200) {
              uni.navigateTo({
                url: `/pages/compare/detail?companyIdList=${this.companyIdList}`,
              })
            } else if (res.code == 10003) {
              uni.showModal({
                title: '提示',
                content: res.message,
                success: function (res) {
                  if (res.confirm) {
                    uni.navigateTo({
                      url: '/pages/VIP/index',
                    })
                  }
                },
              })
            } else if (res.code == 10001) {
              uni.showToast({
                title: '您还没有登录，请登录后操作',
                duration: 2000,
                icon: 'none',
              })
              setTimeout(() => {
                uni.setStorageSync('pageUrl', window.location.href)
                uni.navigateTo({
                  url: '/pages/login/index',
                })
              }, 2000)
            }
          })
        }
      },
      // 微信分享
      initShareConfig() {
        let _this = this
        let windowurl = window.location.href.split('#')[0]
        uni.request({
          url: 'https://oldm.51bmj.cn/WeiXin/GetClientSign', //仅为示例，并非真实接口地址。
          data: {
            rawUrl: windowurl,
          },
          dataType: 'json',
          header: {
            'X-Requested-With': 'XMLHttpRequest',
          },
          method: 'GET',
          success: res => {
            if (res.statusCode == 200) {
              let { data } = res
              let shareInfo = {
                title: '企业对比',
                desc: '企业荣誉全方位对比，一键导出',
                link: window.location.href,
              }
              console.log(99999999, data, shareInfo)
              wxShareConfig(this.$wx, data, shareInfo)
            }
          },
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  //@import url(); 引入公共css类
  .comparison_page {
    .search_bar {
      position: relative;
      .search_input {
        background-color: #fff;
        height: 120rpx;
        padding: 20rpx 30rpx;
        display: flex;
        align-content: center;
        justify-content: space-between;
        .search_L {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 6rpx;
          flex: 1;
          background-color: #f8f8f8;
          padding: 0 15rpx;
          input {
            flex: 1;
          }
        }
        .search_R {
          width: 140rpx;
          height: 80rpx;
          background-color: #2862ad;
          color: #fff;
          margin-left: 20rpx;
          border-radius: 10rpx;
          line-height: 80rpx;
          text-align: center;
          // margin: 0 20rpx;
          font-size: 28rpx;
        }
      }
      .search_result {
        position: absolute;
        z-index: 999;
        // left: 30rpx;
        top: 130rpx;
        background-color: #fff;
        max-height: 800rpx;
        width: 100%;
        padding: 0 30rpx;
        overflow-y: auto;
        ul {
          li {
            line-height: 60rpx;
            height: 60rpx;
            border-bottom: 1rpx solid #ccc;
            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; //限制行数
              overflow: hidden; //超出部分隐藏
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .search_content {
      position: relative;
      min-height: 700rpx;
      text {
        padding-left: 30rpx;
        height: 80rpx;
        background-color: #fff6ef;
        color: #ff7648;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
      .startComparison {
        position: absolute;
        bottom: 0;

        right: 50%;
        transform: translateX(50%);
        margin: 100rpx auto 0;
        width: 290rpx;
        height: 80rpx;
        background-color: #1678ff;
        font-size: 28rpx;
        color: #fff;
        border-radius: 10rpx;
        line-height: 80rpx;
        text-align: center;
      }
    }

    .no_result {
      display: flex;
      align-items: center;
      padding-top: 108rpx;
      flex-direction: column;
      image {
        width: 100%;
        height: 1660rpx;
      }
      // text {
      //   margin-top: 38rpx;
      //   color: #333;
      //   font-size: 28rpx;
      // }
    }
  }
</style>
